<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view>
			<view>
				<view class='header'>
					<image src='../../static/img/wx_login.png'></image>
				</view>
				<view class='content'>
					<view>申请获取以下权限</view>
					<text>获得你的公开信息(昵称，头像、地区等)</text>
				</view>
				<view class="btn-box">
					<button class="bottom" type="default" @click="cancelAuth">取消</button>
					<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
						授权登录
					</button>
				</view>
				
			</view>
		</view>
		
		<!-- #endif -->
	</view>
</template>

<script>
	import logic from '../../common/logic.js';
	export default {
		data() {
			return {
				isCanUse: !uni.getStorageSync('isCanUse'),//默认为true
				deny:!uni.getStorageSync('deny')
			}
		},
		methods: {
			wxGetUserInfo(e) {
				let _this = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						logic.userInfo.nickName = infoRes.userInfo.nickName; //昵称
						logic.userInfo.avatarUrl = infoRes.userInfo.avatarUrl; //头像
						try {
							uni.setStorageSync('isCanUse', true);//记录是否己授权  false:表示未授权
							console.log('授权完成，跳转到登录页')
							uni.setStorageSync('deny',false);
							uni.navigateTo({
								url:'../../pages/login/login'
							});							
						} catch (e) {
							console.log(e);
						}
					},
					fail(res) {
						console.log(res);
						uni.showModal({
							title: '警告',
							content: '您点击了拒绝授权!!!',
							showCancel: true,
							cancelText:"直接登录",
							confirmText: '返回授权',
							success: function (res) {
							  if (res.confirm) {
								console.log('用户点击了“返回授权”')
							  }else{
								logic.global.deny = true;
								uni.setStorageSync('deny',true);
								uni.navigateTo({
								  url: '../../pages/login/login',
								});
							  }
							}
						})
					}
				});
			},
			cancelAuth(){
				logic.global.deny = true;
				uni.setStorageSync('deny',true);
				uni.navigateTo({
				  url: '../../pages/login/login',
				});
			}
		}
	}
</script>

<style>
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}
	
	.header image {
		width: 200rpx;
		height: 200rpx;
	}
	
	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}
	
	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}
	.btn-box{
		width:90%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin:60rpx auto;
	}
	.bottom {
		border-radius: 45rpx;
		width:300rpx;
		height:90rpx;
		font-size: 35rpx;
	}
	.bottom:first-child{border:1px solid #dedede;}
</style>
